<template>
  <div style="padding-top:50px;">
    <!-- <Headers title="缺料列表"></Headers> -->
    <div class="menu">
      <van-tabs @click="clickTab">
         <van-tab title="代办" name="1"></van-tab>
          <van-tab title="已办" name="2"></van-tab>
       
      </van-tabs>
    </div>

    
     
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="cont"
      >
       <van-cell-group v-for="item in list" :key="item" @click="gotoDetail1">
        <van-cell label="2012222010095" is-link >
          <template #title>
            <van-tag type="success">欠料单号{{item}}</van-tag>
          </template>
        </van-cell>
        <van-cell title="新款(扩色)单号:" label="2012222010095" />
        <div class="mycell">
          <span class="mycell_title">物料号:</span>
          <span class="mycell_value">2012222010095</span>
        </div>
        <div class="mycell">
          <span class="mycell_title">样衣号:</span>
          <span class="mycell_value">2012222010095</span>
        </div>
        <div class="mycell">
          <span class="mycell_title">名称:</span>
          <span class="mycell_value">啦啦啦</span>
        </div>
        <div class="mycell">
          <span class="mycell_title">版次:</span>
          <span class="mycell_value">哒哒哒</span>
        </div>
      </van-cell-group>
 
      </van-list>
</van-pull-refresh>



    <van-popup
      v-model="show"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-form @submit="onSubmit">
        <van-field
         disabled
          readonly
          v-model="formData.field1"
          name="样衣号"
          label="样衣号"
          placeholder="样衣号"
        />
        <van-field
          readonly
         disabled
          v-model="formData.field2"
          name="面料号"
          label="面料号"
          placeholder="面料号"
        />
        <van-field
          readonly
         disabled
          v-model="formData.field3"
          name="本款熟练"
          label="本款熟练"
          placeholder="本款熟练"
        />
        <van-field
          :disabled="!isEdit"
          v-model="formData.field4"
          name="调样数量"
          label="调样数量"
          placeholder="调样数量"
          type="number"
        />
        <van-tag v-show="isEdit" type="danger" style="margin-left:16px;"
          >附注：提交即生成调样申请单</van-tag
        >
        <div style="margin: 16px" v-show="isEdit">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  components: {},
  data() {
    return {
       list: [],
       refreshing: false,
      loading: false,
      finished: false,
      show: false,
      isEdit: true,
      pagesize:10,
      pagenum:1,
      billflag:"N",//已办Y   待办N
      formData: {
        field1: "asasfasdfasdf",
        field2: "sdsdsds",
        field3: "1.6",
        field4: "1.6",
      },
    };
  },
  created() {
    var data = {
      iparam0: 35,
      iparam1: 1,
    };
    this.$api.api_LackMateria.lackList(data);
  },
  mounted() {},
  methods: {
    clickTab(name,title){
      console.log(name,title)
      this.pagenum=1;
      this.list=[];
       this.finished = false;
       this.loading = true;
      if(title=="代办"){
        this.isEdit=true;
      }else{
        this.isEdit=false;
      }
       this.onLoad();
      
    },
    onLoad() {
      console.log("pagenum",this.pagenum)
      this.pagenum++;
      // 异步更新数据
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.pagenum=1;
      this.onLoad();
    },
    onSubmit() {
      console.log(this.formData);
    },
    gotoHasdone() {
      this.$router.replace("/lackMateriaHasdoneList");
    },
    gotoDetail1() {
      //   this.$router.push({name:"lackMateriaDetail",params:{isEdit:true}})
      this.show = true;
    },
    gotoDetail2() {
      this.$router.push({
        name: "lackMateriaDetail",
        params: { isEdit: true },
      });
    },
  },
};
</script>
<style scoped lang="less">
.title {
  text-align: center;
  margin: 10px;
  font-size: 20px;
  line-height: 20px;
}
.cont {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 4px;
}
.van-cell-group {
  width: 150px;
  padding: 6px;
  margin: 6px;
  border-radius: 20px;
  .van-cell {
    font-size: 12px;
    padding: 4px;
    margin: 0;
  }
}
.menu {
  position: fixed;
  top: 0;
  text-align: right;
  width: 100%;
  z-index: 9;
}
.mycell {
  display: flex;
  font-size: 12px;
  line-height: 20px;
  padding: 4px;
  position: relative;
  box-sizing: border-box;
  .mycell_title {
    // width: 30px;
    font-size: 400;
    color: #323233;
  }
  .mycell_value {
    flex: 1;
    font-size: 400;
    color: #969799;
  }
}
.mycell::after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 0.42667rem;
  bottom: 0;
  left: 0.42667rem;
  border-bottom: 0.02667rem solid #ebedf0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.noedit{
    background-color: #ccc;
    opacity: 0.5;
}

</style>